<template>
    <div id="leftbannar">
      <div class="squ">
        <div @click="gotolook">
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#icondengpao2x"></use>
          </svg>
          <p>看看</p>
        </div>
      </div>
      <div class="squ">
        <div @click="gotobiji">
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#iconzhinan2x"></use>
          </svg>
          <p>笔记</p>
        </div>
      </div>
      <div class="squ">
        <div>
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#iconjiyu2x"></use>
          </svg>
          <p>讨论</p>
        </div>
      </div>
      <div class="squ">
        <div>
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#iconxingxing2x"></use>
          </svg>
          <p>VIP</p>
        </div>
      </div>
      <div class="squ">
        <div>
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#iconcaidan2x"></use>
          </svg>
          <p>好礼</p>
        </div>
      </div>
      <div class="squ">
        <div>
          <svg class="menuIcon icon" aria-hidden="true">
            <use xlink:href="#iconguanyuwomen2x"></use>
          </svg>
          <p>我们</p>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "LeftBannar",
    methods: {
      gotolook() {
        this.$router.push('look')
      },
      gotobiji() {
        if (this.$store.state.user.uid ==='') {
          this.$message.error("请先登录")
        }else {
          this.$router.push('/biji')
        }
      }
    }
  }
</script>

<style scoped>
  .menuIcon{
    font-size: 16px;
    width: 60px;
    height: 60px;
  }
  #leftbannar{
    width: 375px;
    height: 550px;
  }
  #leftbannar p{
    font-size: 18px;
  }
  .squ{
    width: 170px;
    height: 170px;
    margin: 0 15px 15px 0;
    float: left;
    border: #beaeae solid 1px;
    background-color: #ffffff;
    text-align: center;
  }
  .squ div{
    margin: 34px 0;
  }
  #leftbannar .iconfont{
    font-size: 40px;
    margin: auto;
  }
</style>
